<template>
    <div class="com-container" @dblclick="revertMap">
        <div class="com-chart" ref='map_ref'></div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {request} from 'network/request'
    import axios from 'axios'

    import {getProvinceMapInfo} from '@/utils/map_utils'
    export default {
        name: '',
        data () {
            return {
                chartInstance:null,
                data:null,
                mapData:{}//所获得的省份矢量地图数据
            }
        },
        created () {
            this.$socket.registerCallBack('mapData',this.getData)
        },
        mounted () {
            this.initChart()
            // this.getData()
            this.$socket.send({
                action:'getData',
                socketType:'mapData',
                chartName:'map',
                value:''
            })
            window.addEventListener('resize',this.screenAdapter)
            this.screenAdapter()
        },
        destroyed () {
            this.$socket.unRegisterCallBack('mapData')
        },
        computed: {
            ...mapState(['theme'])
        },
        methods: {
            async initChart(){
                this.chartInstance=this.$echarts.init(this.$refs.map_ref,this.theme)
                // 请求的数据是从vue项目文件里获取来的，并非koa2后台获取
                const res=await axios.get('http://192.168.1.241:8999/static/map/china.json')
                this.$echarts.registerMap('china',res.data)
                const initOption={
                    title:{
                        text:'▎商家分布',
                        left:20,
                        top:20
                    },
                    legend:{
                        left:'5%',
                        bottom:'5%',
                        orient:'verticle'//筛选项方向
                    },
                    geo:{
                        type:'map',
                        map:'china',
                        top:'5%',
                        bottom:'5%',
                        itemStyle: {
                            areaColor: '#295ccb',
                            borderColor: '#333'
                        }
                    },

                    
                }
                this.chartInstance.setOption(initOption)
                const handleMapClickFn=async arg=>{
                    const provinceInfo=getProvinceMapInfo(arg.name)
                    // 解决点进某个省份后再点击该省份地图报错
                    if(!provinceInfo.key) return
                    // 点击过的省份矢量地图数据缓存才来，点相同省份不必再请求数据
                    // 缓存地图数据
                    if(!this.mapData[provinceInfo.key]){
                        const res=await axios.get('http://192.168.1.241:8999'+provinceInfo.path)
                        this.mapData[provinceInfo.key]=res.data
                        this.$echarts.registerMap(provinceInfo.key,res.data)
                    }
                    const changeOption={
                        geo:{
                            map:provinceInfo.key
                        }
                    }
                    this.chartInstance.setOption(changeOption)
                }
                this.chartInstance.on('click',handleMapClickFn)
            },
            getData(res){
                // const {data:Data}=await request({url:'map'})
                // this.data=Data
                this.data=res
                this.updateChart()
            },
            updateChart(){
                // 处理获取的数据
                const seriesArr=this.data.map(item=>{
                    return {
                        type:'effectScatter',
                        rippleEffect:{
                            scale:5,
                            brushType:'stroke'//改变散点图的呈现方式——空心散开
                        },
                        name:item.name,
                        data:item.children,
                        coordinateSystem:'geo'//指明散点使用的是geo坐标系统
                    }
                })
                const legendArr=this.data.map(item=>item.name)
                const dataOption={
                    legend:{
                        data:legendArr
                    },
                    series:seriesArr
                }
                this.chartInstance.setOption(dataOption)
            },
            screenAdapter(){
                const titleFontSize=this.$refs.map_ref.offsetWidth/100*3.6
                const adapterOption={
                    title:{
                        textStyle:{
                            fontSize:titleFontSize
                        }
                    },
                    legend:{
                        itemWidth:titleFontSize/2,
                        itemHeight:titleFontSize/2,
                        itemGap:titleFontSize/2,
                        textStyle:{
                            fontSize:titleFontSize/2
                        }
                    }
                }
                this.chartInstance.setOption(adapterOption)
                this.chartInstance.resize()
            },
            revertMap(){
                const changeOption={
                    geo:{
                        map:'china'
                    }
                }
                this.chartInstance.setOption(changeOption)
            }
        },
        watch: {
            theme(){
                this.chartInstance.dispose()
                this.initChart()
                this.screenAdapter()
                this.updateChart()
            }
        }
    }
</script>

<style scoped>

</style>
